<template>
  <a-modal
    :title="modalTitle"
    :visible="submitFailModalVisible"
    ok-text="继续导入"
    cancel-text="取消"
    :mask-closable="false"
    :width="798"
    centered
    class="submit-fail"
    @ok.stop="handleImport"
    @cancel.stop="cancelImport"
  >
    <div class="submit-fail-box">
      <div class="error-number">
        解析成功<span
          class="error-number-emphasis error-number-emphasis-green"
          >{{ successNumber }}</span
        >条数据，&nbsp; 失败<span class="error-number-emphasis">{{
          errorNumber
        }}</span
        >条数据
      </div>

      <!-- 表格版本 -->
      <div v-if="getErrorDataTable.length > 0" class="error-detail-table">
        <a-table
          :columns="columns"
          :data-source="getErrorDataTable"
          :pagination="{
            defaultPageSize: 4,
          }"
        >
          <template
            v-for="col in columns"
            :slot="`${col.key}Row`"
            slot-scope="text"
          >
            <div :key="`${col.key}Row`">
              <a-tooltip>
                <template slot="title">
                  {{ text }}
                </template>
                <span class="text-ellipsis">{{ text }}</span>
              </a-tooltip>
            </div>
          </template>
        </a-table>
      </div>

      <div
        class="error-number"
        style="height: 60px; line-height: 25px; white-space: nowrap;"
      >
        您可选择继续导入，但以下场景数据会直接舍弃（注：删除一整行数据）：
        <br />
        1、解析失败的数据 <br />2、字段数据类型与定义不符
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import DataStore from '@/store/modules/data'
import { isArray } from 'lodash'

interface KeyValue {
  [key: string]: any
}

@Component({
  components: {},
})
export default class SubmitFailModal extends Vue {
  // 标题
  private modalTitle: string = '解析结果'

  // 错误信息
  @Prop() errorData!: any
  private isErrorDataArray: boolean = true

  // 错误数量
  @Prop({ type: Number, default: 0 }) errorNumber!: number
  @Prop({ type: Number, default: 0 }) successNumber!: number

  // 错误类型
  private errorTypes = [
    'ExceedColNum',
    'QuoteWithNoEscape',
    'EscapeWithNoQuote',
    'UnderColNum',
    'ContainIllegalChar',
  ]
  private errorTypesInfo: KeyValue = {
    ExceedColNum: '字段数与列数不匹配',
    QuoteWithNoEscape: '引号未匹配转义字符',
    EscapeWithNoQuote: '含转义符号句子需用引号包含',
    UnderColNum: '字段数和列数不匹配',
    ContainIllegalChar: '含非法字符',
  }

  // 表格信息
  private columns = [
    {
      dataIndex: 'failType',
      key: 'failType',
      title: '错误类型',
      ellipsis: true,
      slots: { title: 'failTypeTitle' },
      scopedSlots: { customRender: 'failTypeRow' },
    },
    {
      title: '错误信息',
      dataIndex: 'failInfo',
      key: 'failInfo',
      ellipsis: true,
      slots: { title: 'failInfoTitle' },
      scopedSlots: { customRender: 'failInfoRow' },
    },
  ]

  // 获取modal展示状态
  get submitFailModalVisible() {
    return DataStore.submitFailModalVisible
  }

  // 点击取消
  public cancelImport() {
    DataStore.setSubmitFailModalVisible(false)
    console.log('cancelImport')
  }

  // 点击确认
  public handleImport() {
    DataStore.setMessageModalOption({
      visible: false,
      message: '',
      tips: '',
    })
    this.$emit('submit-data')
  }

  get getErrorDataType() {
    return isArray(this.errorData)
  }

  get getErrorDataTable() {
    const result: any[] = []
    this.errorTypes.forEach((type: string) => {
      if (this.errorData && this.errorData[type]) {
        this.errorData[type].lines.forEach((element: any) => {
          result.push({
            failType: this.errorTypesInfo[type],
            failInfo: element,
          })
        })
      }
    })
    return result
  }
}
</script>
<style lang="less" scoped>
.submit-fail {
  // modal标题样式
  /deep/ .ant-modal-header {
    color: #5d637e;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    letter-spacing: 1px;
    line-height: 20px;
    padding: 11px 20px;
  }

  /deep/ .ant-modal-close-x {
    height: 40px;
    line-height: 40px;
    width: 40px;
  }

  // modal底部样式
  /deep/ .ant-modal-footer {
    height: 40px;
    padding: 8px 20px;

    button {
      font-size: 14px;
      font-weight: 400;
      height: 24px;
      line-height: 24px;
      padding-left: 5px;
      width: 44px;
    }

    button:nth-child(2) {
      width: 66px;
    }
  }

  // 内容样式
  /deep/ .ant-modal-body {
    padding: 0;
  }

  .submit-fail-box {
    padding: 20px 24px;

    .error-number {
      color: #5d637e;
      font-size: 14px;
      font-weight: 400;
      height: 20px;
      line-height: 20px;
      margin-bottom: 16px;

      .error-number-emphasis {
        color: #e6505a;
        font-size: 16px;
        font-weight: 400;
        margin-left: 5px;
        margin-right: 5px;
      }

      .error-number-emphasis-green {
        color: #78c06e;
      }
    }

    .error-detail {
      background: #fafafa;
      color: rgba(0, 0, 0, 0.47);
      font-size: 12px;
      font-weight: 400;
      height: 228px;
      letter-spacing: 1px;
      line-height: 18px;
      padding: 16px;

      .error-detail-title {
        color: #5d637e;
        font-weight: 400;
        margin-bottom: 9px;
      }
    }

    .error-detail-table {
      height: 325px;

      /deep/ .ant-table-thead > tr:first-child > th:first-child {
        width: 180px;
      }

      /deep/ .text-ellipsis {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;
      }
    }
  }
}
</style>
